<!--
  Copyright (c) 2011 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://www.apache.org/licenses/LICENSE-2.0.html
-->
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API Example: Aerials</title>
<style>
  html {
    height: auto;
  }

  body {
    height: auto;
    margin: 0;
    padding: 0;
  }

  #map_canvas {
    height: auto;
    position: absolute;
    bottom:0;
    left:0;
    right:0;
    top:25px;
  }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var locations = [
  {loc:"The Googleplex", latLng: new google.maps.LatLng(37.421776119626294, -122.08574295043945)},
  {loc:"Oakland, CA, USA", latLng: new google.maps.LatLng(37.8043637, -122.2711137)},
  {loc:"San Jose, CA, USA", latLng: new google.maps.LatLng(37.3393857, -121.8949555)},
  {loc:"San Diego, CA, USA", latLng: new google.maps.LatLng(32.7153292, -117.1572551)},
  {loc:"Portland, OR, USA", latLng: new google.maps.LatLng(45.5234515, -122.6762071)},
  {loc:"Santa Cruz, CA, USA", latLng: new google.maps.LatLng(36.96412341816288, -122.0193099975586)},
  {loc:"Capetown, South Africa", latLng: new google.maps.LatLng(-33.9248685, 18.4240553)},
  {loc:"Dormund, Germany", latLng: new google.maps.LatLng(51.5120542, 7.4635729)},
  {loc:"Venice, Italy", latLng: new google.maps.LatLng(45.4343363, 12.3387844)}
];




function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(45.522976, -122.682116),
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
//    overviewMapControl: true,
//    overviewMapControlOptions: {
//     opened: true
//    }
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  map.setTilt(45);

  for(var i = 0; i < locations.length ; i++) {
    var selectbox = document.getElementById("city");
    var optn = document.createElement("option");
    optn.text = locations[i].loc;
    optn.value = i;
    selectbox.options.add(optn);
  }

  map.setCenter(locations[0].latLng);
}

function changeCity() {
  map.setCenter(locations[document.getElementById("city").selectedIndex].latLng);
}

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
  <select id="city" onchange="changeCity()"></select>
</body>
</html>